<template>
  <div class="hiddenTroubleTrend-root">
    <formTitleVue
      title="隐患趋势统计"
      :selectOptions="selectOptions"
      @selectChange="selectChange"
    />
    <myBar domId="hiddenTroubleInvestigate-hiddenTroubleTrend-echarts" height="30vh" :chartsData="chartsData" :myOption="echartsOption"/>
  </div>
</template>

<script>
  import formTitleVue from "@/components/FormTitle/formTitle.vue";
  import myBar from '@/components/Echarts/myBar.vue';
  import { time_select_optios } from '@/utils/global.js';

  import { riskHazardCountStatistics
  } from '@/api/risk/riskHazard'


  export default {
    name: "riskTrend",
    components: {
      formTitleVue,myBar,
    },
    data() {
      return {
        selectOptions: [
          {
            selectValue: "近一月",
            options:[
              { label: "近一月", value: "近一月" },
              { label: "近半年", value: "近半年" },
              { label: "近一年", value: "近一年" },
            ]
          }
        ],
        dateTypeObject:{ "近一月":"03", "近半年":"02", "近一年":"02"},
        chartsData: {
          xData: [],
          yData: [],
        },
        echartsOption:{

        },
        searChForm: {
          startTime: '',
          endTime: '',
          areaCode:'',
          placeType:'',
          dateType:''
        },
      };
    },
    watch: {

    },
    mounted() {
      this.selectChange("近一月");

    },
    methods: {
      selectChange(item) {
        // console.log(item);
        this.searChForm.startTime = time_select_optios[item].startTime
        this.searChForm.endTime = time_select_optios[item].endTime
        this.searChForm.dateType = this.dateTypeObject[item]

        this.getData();
      },
      getData(){

        //this.chartsData.yData = [10, 20, 30, 40, 50, 60, 70];

        this.loading = true
        this.searChForm.areaCode = this.$store.state.account.user.deptIds;
        this.searChForm.placeType = this.$commonJs.getPlaceType(this.searChForm.areaCode);
        riskHazardCountStatistics(this.searChForm).then((res) => {
          this.chartsData.xData = res.data.xAxle
          this.chartsData.yData = res.data.data.map(item=>{
            return {
              name:item.name,
              data:item.report
            }
          })
          this.loading = false
          // this.draw(res.data);
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
.hiddenTroubleTrend-root {
}
</style>
